<template>
  <transition name="fade">
    <div class="history-address-list" v-show="handleVisible">
      <sl-gutter/>
      <common-address-tabs/>
      <sl-gutter/>
      <scroll class="history_city_list" ref="fuzzyCity"
              :listenScroll="true"
              :probeType="3"
              :data="data">
        <div class="history_list_group">
          <address-list v-for="(item, index) in data"
                        :addressData="item"
                        :address="item.address"
                        :addressDetails="item.addressDetail"
                       :key="'group-place' + index"
                       @selected="onSelectItem"/>
          <div class="no-history" v-if="data.length < 1">暂无历史记录</div>
        </div>
      </scroll>
    </div>
  </transition>
</template>

<script>
  import { mapState, mapMutations } from 'vuex'
  import addressList from './address-list'
  import commonAddressTabs from './common-address-tabs'
  export default {
    components: { addressList, commonAddressTabs },
    data () {
      return {
        data: []
      }
    },
    computed: {
      ...mapState([
        'userCarState',
      ]),
      handleVisible () {
        if (this.userCarState.searchAddress.isOpenHistoryAddress) {
          let _localData = store.get('SEARCH_HISTORY_RECORD') ? store.get('SEARCH_HISTORY_RECORD') : [];
          // 循环本地数据，判断是否为当前还是常用
          let _selectedAddress = this.userCarState.callCarParams[this.$route.params.address];
          if (_selectedAddress.latitude === '' && _selectedAddress.longitude === '') {
            this.data = _localData;
            return true;
          };
          let newData = _localData.map((item) => {
            if (item.latitude === _selectedAddress.latitude && item.longitude === _selectedAddress.longitude) {
              Object.assign(item, {
                current: true
              })
            }
            return item;
          });
          if (newData.some(item => item.current)) {
            newData.unshift(newData.splice(newData.findIndex(a => a.current), 1)[0])
          } else {
            newData.unshift(Object.assign(this.userCarState.callCarParams[this.$route.params.address], {
              current: true
            }))
          }
          this.data = newData;
          return true
        }
        return false
      }
    },
    methods: {
      ...mapMutations([
        'SET_USER_CAR_START_ADDRESS',
        'SET_USER_CAR_END_ADDRESS',
        'SET_GEOLOCALTION_STATE'
      ]),
      onSelectItem (item) {
        let type = this.$route.params.address;
        if (type === 'startAddress') {
          this.SET_USER_CAR_START_ADDRESS(item);
        } else if (type === 'endAddress') {
          this.SET_USER_CAR_END_ADDRESS(item);
        }
        this.SET_GEOLOCALTION_STATE('SUCCESS');
        this.$router.push('/carIndex');
      }
    },
    watch: {

    }
  }
</script>

<style lang="stylus" type="text/stylus" scoped>
  @import "~assets/css/theme"

  .history-address-list
    width 100%
    position absolute
    top 5 * .61rem
    bottom 0
    background $sl_theme_bg
    .history_city_list
      position: absolute
      left 0
      right 0
      top 6 * .61rem
      bottom 0
      overflow: hidden
      background: $sl_theme_bg
    .no-history
      text-align center
      padding 5 * .61rem 0
      font-size $sl_font_size_14
  .fade-enter-active, .fade-leave-active
    transition opacity .5s
  .fade-enter, .fade-leave-to
    opacity: 0
</style>
